<template>
  <div class="profile">
    <user-info>
      <div slot="avatar" v-if="hasToken">
        <svg t="1626403625483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="14978" width="200" height="200">
          <path
              d="M421.321532 800.680851h196.085106v125.276596c0 54.146723-43.901277 98.042553-98.042553 98.042553-54.15217 0-98.042553-43.89583-98.042553-98.042553v-125.276596z"
              fill="#C5AC95" p-id="14979"></path>
          <path
              d="M134.16034 592.689021c0 47.921021 38.846638 86.76766 86.76766 86.76766 47.915574 0 86.762213-38.846638 86.762213-86.76766 0-47.915574-38.846638-86.762213-86.76766-86.762212-47.915574 0-86.762213 38.846638-86.762213 86.767659z"
              fill="#C9AB90" p-id="14980"></path>
          <path
              d="M490.855489 149.23166c159.733106 0 289.209191 129.481532 289.209192 289.214638v327.772596c0 85.188085-69.054638 154.242723-154.242724 154.242723H317.325617c-63.885617 0-115.679319-51.799149-115.679319-115.684766V438.446298c0-159.733106 129.476085-289.214638 289.209191-289.214638z"
              fill="#EBD3BD" p-id="14981"></path>
          <path
              d="M410.678468 593.702128c106.485106 0 192.806128 79.850213 192.806128 178.344851 0 4.869447-0.206979 9.695319-0.626383 14.461276H461.344681L408.510638 680.851064l-52.828595 105.657191H218.498723a167.233362 167.233362 0 0 1-0.626383-14.461276C217.87234 673.55234 304.193362 593.702128 410.678468 593.702128z"
              fill="#4D4132" p-id="14982"></path>
          <path
              d="M300.925277 111.507064C333.170383 32.441191 446.779915-12.52766 570.564085 9.297702c122.988936 21.683745 213.988766 101.898894 218.346213 186.618553 66.407489 30.393191 105.390298 63.945532 100.324766 92.677447-9.662638 54.805787-176.002723 71.282383-371.526809 36.809532-195.524085-34.478298-346.193702-106.855489-336.531064-161.661277 4.831319-27.402894 48.830638-45.224851 116.066043-51.886297z"
              fill="#4D4132" p-id="14983"></path>
          <path
              d="M712.58417 592.689021c0 47.921021 38.846638 86.76766 86.762213 86.76766s86.76766-38.846638 86.76766-86.76766c0-47.915574-38.852085-86.762213-86.76766-86.762212s-86.76766 38.846638-86.76766 86.767659z"
              fill="#EBD3BD" p-id="14984"></path>
          <path
              d="M760.782979 583.04817a38.563404 38.563404 0 1 0 77.126808 0.016341 38.563404 38.563404 0 0 0-77.126808-0.016341z"
              fill="#E89E80" p-id="14985"></path>
          <path
              d="M220.922553 467.363404a77.126809 77.126809 0 1 0 154.24817 0c0-42.594043-34.532766-77.121362-77.126808-77.121361s-77.121362 34.532766-77.121362 77.126808z"
              fill="#FFFFFF" p-id="14986"></path>
          <path d="M259.485957 472.18383a33.742979 33.742979 0 1 0 67.485958 0 33.742979 33.742979 0 0 0-67.485958 0z"
                fill="#514141" p-id="14987"></path>
          <path
              d="M490.855489 467.363404c0 42.594043 34.532766 77.126809 77.126809 77.126809s77.115915-34.532766 77.115915-77.126809-34.527319-77.121362-77.121362-77.121361-77.126809 34.532766-77.126808 77.126808z"
              fill="#FFFFFF" p-id="14988"></path>
          <path d="M529.418894 472.18383a33.742979 33.742979 0 1 0 67.48051 0 33.742979 33.742979 0 0 0-67.485957 0z"
                fill="#514141" p-id="14989"></path>
          <path
              d="M415.520681 457.531915a34.412936 34.412936 0 0 1 32.332255 22.658723l35.95983 98.886809a67.485957 67.485957 0 0 1-63.400851 90.542298h-15.234724a67.485957 67.485957 0 0 1-62.453106-93.03149l39.576511-96.746212A35.899915 35.899915 0 0 1 415.520681 457.531915z"
              fill="#E89E80" p-id="14990"></path>
          <path
              d="M200.924662 365.433751m31.41485-9.008063l83.772934-24.021502q31.41485-9.008063 40.422914 22.406787l0 0q9.008063 31.41485-22.406787 40.422913l-83.772934 24.021503q-31.41485 9.008063-40.422914-22.406787l0 0q-9.008063-31.41485 22.406787-40.422914Z"
              fill="#4D4132" p-id="14991"></path>
          <path
              d="M470.337981 317.390747m31.41485 9.008063l125.659401 36.032254q31.41485 9.008063 22.406787 40.422913l0 0q-9.008063 31.41485-40.422914 22.406787l-125.659401-36.032253q-31.41485-9.008063-22.406787-40.422914l0 0q9.008063-31.41485 40.422914-22.406787Z"
              fill="#4D4132" p-id="14992"></path>
        </svg>
      </div>
      <div slot="info" v-if="Object.keys(userInfo).length">{{ userInfo.phone }}</div>
    </user-info>
    <div class="account">
      <div class="account-item">
        <p class="account-item-top">
          <span class="account-item-top-count">0.00</span>
          <span class="account-item-top-unit">元</span>
        </p>
        <p class="account-item-text">我的余额</p>
      </div>
      <div class="account-item">
        <p class="account-item-top">
          <span class="account-item-top-count">0</span>
          <span class="account-item-top-unit">个</span>
        </p>
        <p class="account-item-text">我的优惠</p>
      </div>
      <div class="account-item">
        <p class="account-item-top">
          <span class="account-item-top-count">0</span>
          <span class="account-item-top-unit">分</span>
        </p>
        <p class="account-item-text">我的积分</p>
      </div>
    </div>
    <list-view :list-data="orderList" class="order-list"></list-view>
    <list-view :list-data="serviceList" class="service-list"></list-view>
    <div v-if="hasToken" id="logout" @click="logout">
      <span class="icon">
          <svg t="1627025248543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2534" width="32" height="32"><path
              d="M384 938.666667H213.333333c-72.533333 0-128-55.466667-128-128V213.333333c0-72.533333 55.466667-128 128-128h170.666667c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667H213.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666v597.333334c0 25.6 17.066667 42.666667 42.666666 42.666666h170.666667c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667zM682.666667 768c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l183.466667-183.466667-183.466667-183.466667c-17.066667-17.066667-17.066667-42.666667 0-59.733333s42.666667-17.066667 59.733333 0l213.333334 213.333333c17.066667 17.066667 17.066667 42.666667 0 59.733334l-213.333334 213.333333c-8.533333 8.533333-17.066667 12.8-29.866666 12.8z"
              p-id="2535" fill="#ff8198"></path><path
              d="M896 554.666667H384c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h512c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z"
              p-id="2536" fill="#ff8198"></path></svg>
        </span>
      <div class="info">退出登录</div>
    </div>
  </div>
</template>

<script>
import UserInfo from "./childComponent/UserInfo";
import ListView from "./childComponent/ListView";
import {LOGIN_TOKEN, USER_INFO} from "@/common/constant";

export default {
  name: "Profile",
  components: {
    UserInfo,
    ListView
  },
  data: function () {
    return {
      hasToken: false,
      userInfo: {},
      orderList: [
        {icon: '#order', iconColor: '#ff8198', info: '我的消息'},
        {icon: '#point', iconColor: '#fc7b53', info: '积分商城'},
        {icon: '#vip', iconColor: '#ffc636', info: '会员卡'},
      ],
      serviceList: [
        {icon: '#service', iconColor: '#ff8198', info: '我的购物车'},
        {icon: '#download', iconColor: '#ff8198', info: '下载购物APP'},
      ]
    }
  },
  activated() {
    this.hasToken = localStorage.getItem(LOGIN_TOKEN);
    let userInfo = localStorage.getItem(USER_INFO);
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
  },
  methods: {
    logout() {
      this.hasToken = false;
      this.userInfo = {};
      localStorage.removeItem(USER_INFO);
      localStorage.removeItem(LOGIN_TOKEN);
    }
  }
}
</script>

<style scoped>
.profile {
  background-color: #f2f2f2;
}

.profile .account {
  display: flex;
  text-align: center;
}

.profile .account .account-item {
  flex: 1;
  background-color: #fff;
}

.profile .account .account-item p {
  margin: 10px 0;
}

.account-item .account-item-top .account-item-top-count {
  font-size: 24px;
  font-weight: 600;
  color: #ff5f3e;
}

.account-item .account-item-top .account-item-top-unit {
  font-size: var(--font-size);
  color: #555;
}

.profile .account .account-item:nth-child(2) {
  margin: 0 1px;
}

.account-item .account-item-text {
  font-size: 12px;
  color: #666;
}

.order-list, .service-list {
  margin-top: 10px;
}

#logout {
  margin-top: 10px;
  background-color: #fff;
  font-size: 15px;
  color: #333;
  height: 44px;
  line-height: 44px;
  position: relative;
}

#logout .icon {
  margin-top: 10px;
  position: absolute;
  left: 8px;
  top: -4px;
}

#logout .icon svg {
  width: 18px;
  height: 18px;
}

#logout .info {
  margin-left: 40px;
  padding-left: 5px;
}
</style>